<template>
  <div class="type">
    <el-form size="mini" :model="formData" ref="formData">
      <!-- {{formData}}--{{value}} -->
      <el-form-item prop="type" :rules="rules.type">
        <div class="flex">
          <div class="mr-5 fontMini">{{titleList[0]}}</div>
          <el-select v-model="formData.type" class="flex1" @change="selectChange">
            <el-option v-for="item in typeOption" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </div>
      </el-form-item>

      <div class="flex" v-if="formData.type === '0'">
        <div class="mr-5 fontMini">{{titleList[1]}}</div>
        <el-form-item prop="reg" :rules="rules.reg" class="flex1">
          <el-input v-model="formData.reg" clearable placeholder="请输入正则校验" class="flex1" @change="valueChange"></el-input>
        </el-form-item>
        <div class="ml-5 fontMini">{{titleList[2]}}</div>
      </div>

      <div v-else-if="formData.type === '1'">
        <div class="mr-5 fontMini mb-5">
          {{titleList[1]}}
          <el-tooltip class="item" effect="dark" placement="top">
            <ul slot="content" class="fnTip">
              <li>函数的四个变量_this、item、parentData</li>
              <li>1、_this:当前对象实例</li>
              <li>2、item:当前联动的数据，</li>
              <li>3、parentData:上级字段的所有数据</li>
              <li>4、fnOptionList:下拉options的数据</li>
            </ul>
            <i class="el-icon-warning" style="color: #e6a23c"></i>
          </el-tooltip>
        </div>
        <el-form-item class="codeMirrorJs" prop="fnData" :rules="rules.fnData">
          <CodeMirrorJs v-model="formData.fnData" class="flex1" @change="valueChange"></CodeMirrorJs>
        </el-form-item>
        <div class="ml-5 fontMini mt-5">{{titleList[2]}}执行函数。</div>
      </div>
      <template v-else-if="formData.type === '2'">
        <div class="mr-5 fontMini flex">
          <div class="flex1">{{titleList[1]}}</div>
          <el-link type="primary" :underline="false" @click="addCompareClick">
            <i class="el-icon-circle-plus-outline fontMini" />
            <span class="fontMini">添加条件</span>
          </el-link>
        </div>
        <div class="flex" v-for="(item, index) in formData.compareList" :key="index">
          <el-form-item class="mr-5" :prop="`compareList.${index}.compare`" :rules="rules.compare">
            <el-select class="flex1" v-model="item.compare">
              <el-option v-for="item in compareOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="`compareList.${index}.compareValue`" :rules="rules.compareValue">
            <el-input v-model="item.compareValue" class="flex1" placeholder="请输入比较值" clearable></el-input>
          </el-form-item>
          <el-form-item class="ml-5">
            <el-button type="text" icon="el-icon-remove-outline" @click="delCompareClick(index)" :disabled="formData.compareList.length === 1"></el-button>
          </el-form-item>
        </div>
        <div class="ml-5 fontMini">{{titleList[2]}}</div>
      </template>
    </el-form>
  </div>
</template>

<script>
const typeOption = [
  { label: '正则', value: '0' },
  { label: '函数', value: '1' },
  { label: '比较', value: '2' }
]
const compareOption = [
  { label: '=', value: '===' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: 'in', value: 'in' },
  { label: 'not in', value: 'not in' },
  { label: '<>', value: '<>' }
]
import CodeMirrorJs from '../../../publicConfig/verifyConfig/codeMirrorJs'
export default {
  name: 'type',
  components: {
    CodeMirrorJs
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    // 用于区别是上级值还是当前值
    titleList: {
      type: Array,
      default: () => ['当"上级字段"采用', '且满足', '条件时，']
    }
  },
  data() {
    return {
      typeOption,
      compareOption,
      formData: {},
      rules: {
        type: [{ required: true, message: '请选择上级类型', trigger: 'change' }],
        reg: [
          {
            required: true,
            message: '请输入正则',
            trigger: 'blur',
            pattern: /^\/.*\/$/,
            message: '请输入合法正则',
            trigger: 'blur'
          }
        ],
        fnData: [{ required: true, message: '请输入函数', trigger: 'blur' }],
        compare: [{ required: true, message: '请选择比较', trigger: 'blur' }],
        compareValue: [{ required: true, message: '请输入比较值', trigger: 'blur' }]
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.formData = JSON.stringify(val) === '{}' ? this.formDataInit() : val
      },
      immediate: true
    }
  },
  methods: {
    formDataInit() {
      return {
        type: '0',
        reg: '',
        fnData: '',
        compareList: [
          {
            compare: '',
            compareValue: ''
          }
        ]
      }
    },
    valueChange() {
      this.$emit('change', this.formData)
    },
    selectChange() {
      // 清空正则函数和对比
      this.formData.reg = ''
      this.formData.fnData = ''
      this.formData.compareList = [
        {
          compare: '',
          compareValue: ''
        }
      ]
      this.$emit('change', this.formData)
    },
    addCompareClick() {
      this.formData.compareList.push({
        compare: '',
        compareValue: ''
      })
    },
    delCompareClick(index) {
      this.formData.compareList.splice(index, 1)
    },
    // form进行校验
    verfiyForm() {
      return new Promise(resolve => {
        this.$refs.formData.validate(valid => {
          if (valid) {
            resolve('success')
          } else {
            resolve('error')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--mini {
  &.codeMirrorJs {
    .el-form-item__content {
      line-height: 15px;
    }
  }
}

.fnTip {
  li {
    line-height: 20px;
  }
}
</style>

